import { cloneDeep } from 'lodash'
import { ref } from 'vue'

/**
 * 接收一个props对象，对象里有如下属性
 *  
 * convertFormState 是一个函数
 * 这个函数必须有返回值，返回的值就是formState的值，在点击确定的时候调用
 * 场景：调用接口前，把数据转换成接口想要的数据
 * 
 * updateData 更新接口
 * addData 新增接口
 * getDataInfo 获取数据详情接口
 * 
 * convertUpdateData 是一个函数
 * 这个函数必须有返回值，返回的值就是formState的值，在点击编辑详情接口返回数据后触发
 * 场景：转换接口拿到的数据，把数据转成组件需要的格式
 */
export const useInsert = (props) => {
  const formState = ref({})
  const visible = ref(false)


  const handleOk = async () => {
    let newData = cloneDeep(formState.value)
    // 转换数据
    if (props.convertFormState) {
      newData = props.convertFormState(newData)
    }

    if (newData.id) {
      await props.updateData(newData)
    } else {
      // 调用新增接口
      await props.addData(newData)
    }


    props.paginationParams.value = {
      ...props.paginationParams.value,
      page: 1
    }

    visible.value = false
  }

  const edit = async (id) => {
    // 打开弹框
    visible.value = true

    // 获取详情数据
    let data = await props.getDataInfo(id)

    
    if (props.convertUpdateData) {
      data = props.convertUpdateData(data)
    }
    
    // 回显数据
    formState.value = data
  }

  return {
    formState,
    visible,
    handleOk,
    edit
  }
}